<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element头部效果</title>
    <style>
        .navbar{
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 55px;
            z-index: 12;

            background-image:radial-gradient(transparent 1px, white 1px);
            background-size: 4px 4px;
            backdrop-filter: saturate(50%) blur(4px);

            /*background-image: radial-gradient(transparent 1px, white 1px);*/
            /*这一行创建了一个元素的背景径向渐变效果。它从透明渐变到白色，每个颜色带的宽度为1像素。*/

            /*background-size: 4px 4px;*/
            /*这一行设置了背景图像的大小为4像素 x 4像素。这意味着渐变会以4像素 x 4像素的大小重复平铺在元素的背景上。*/

            /*backdrop-filter: saturate(50%) blur(4px);*/
            /*这一行应用了一个背景滤镜效果。具体来说，它使用了两个滤镜函数：*/
            /*saturate(50%)：这个滤镜函数减少了元素的饱和度，使颜色变得更加灰淡。数字50%表示将饱和度降低到原来的一半。*/
            /*blur(4px)：这个滤镜函数给元素应用了高斯模糊效果，模糊半径为4像素。这会使元素的背景和内容看起来模糊。*/
        }
        .page-content{
            padding-top: 55px;
            height: 120vh;
            width: 100%;
            background: cornflowerblue;
        }
    </style>
</head>
<body>
    <header class="navbar"></header>
    <main class="page-content">

    </main>
</body>
</html>
